<template>
  <div class="trouble-shooting-table-wraper">
    <div class="trouble-shooting-table-title">{{title}}</div>
    <el-table v-loading="loading" :data="tableData">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column type="index" :index="(index)=>tableIndex(queryParams.pageSize,queryParams.pageNum,index)" label="序号" align="center" />
      <el-table-column label="路线名称" align="center" prop="roadName" />
      <el-table-column label="类型" align="center" prop="iTroubleshooting" width="100">
        <template slot-scope="scope">
          {{getCheckTypeName(scope.row.iTroubleshooting)}}
        </template>
      </el-table-column>
      <el-table-column label="部位" align="center" prop="iPart" width="100">
        <template slot-scope="scope">
          {{getCheckTypeName(scope.row.iPart)}}
        </template>
      </el-table-column>
      <el-table-column label="位置桩号" align="center" prop="locationNum" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-if="scope.row.dataStatus == 2" size="mini" type="text" icon="el-icon-s-check" @click="handleAudit(scope.row)">审核</el-button>
          <el-button v-if="scope.row.dataStatus == 3" size="mini" type="text" icon="el-icon-s-promotion" @click="handleAssign(scope.row)">指派</el-button>
          <el-button v-if="scope.row.dataStatus == 5" size="mini" type="text" icon="el-icon-takeaway-box" @click="handleReceive(scope.row)">接收</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination class="trouble-shooting-pagination" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    <trouble-shooting-audit-dialog ref="troubleShootingAuditDialog" @ok="getList"></trouble-shooting-audit-dialog>
    <trouble-shooting-assign-dialog ref="troubleShootingAssignDialog"></trouble-shooting-assign-dialog>
    <trouble-shooting-receive-dialog ref="troubleShootingReceiveDialog" @ok="getList"></trouble-shooting-receive-dialog>
  </div>
</template>

<script>
import { listTroubleShooting } from "@/api/cases/troubleShooting";
import { listCommonCheckType } from '@/api/cases/commonCheckType'
import TroubleShootingAuditDialog from '@/components/Dialog/troubleShootingAuditDialog.vue';
import TroubleShootingReceiveDialog from '@/components/Dialog/troubleShootingReceiveDialog.vue';
import TroubleShootingAssignDialog from '@/components/Dialog/troubleShootingAssignDialog.vue';

export default {
  components: { TroubleShootingAuditDialog, TroubleShootingReceiveDialog, TroubleShootingAssignDialog },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      tableData: [],
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        dataStatus: this.dataStatus
      },
      //检查类型
      checkTypes: []
    }
  },
  props: {
    dataStatus: {
      type: [String, Number],
      default: void 0
    }
  },
  computed:{
    title(){
      if(this.dataStatus == 2){
        return "待审核"
      }else if(this.dataStatus == 3){
        return "待指派"
      }else if(this.dataStatus == 5){
        return "待接收"
      }
    }
  },
  created() {
    this.initEvent();
  },
  async mounted(){
    await this.getCheckTypes();
    this.getList();
  },
  destroyed(){
    this.destroyEvent();
  },
  methods: {
    /**
     * 初始化事件
     */
    initEvent(){
      this.$root.$on("updateTable",this.getList);
    },
    destroyEvent(){
      this.$root.$off("updateTable",this.getList);
    },
    /** 查询病害排查管理列表 */
    getList() {
      this.loading = true;
      listTroubleShooting(this.queryParams).then((response) => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /**
     * 获取类型
     */
    getCheckTypes() {
      let params = {
        status: 0,
        delFlag: 0
      }
      return new Promise((resolve, reject) => {
        listCommonCheckType(params).then(res => {
          this.checkTypes = res.data;
          resolve()
        }).catch(() => {
          this.checkTypes = [];
          reject()
        })
      })
    },
    /**
     * 获取检查的名称
     */
    getCheckTypeName(checkType) {
      let index = this.checkTypes.findIndex((item) => {
        return item.id == checkType;
      })
      if (index > -1) {
        return this.checkTypes[index].checkTypeName
      } else {
        return ""
      }
    },
    /**
     * 审核
     */
    handleAudit(row) {
        this.$refs.troubleShootingAuditDialog.open(row.id);
    },
    /**
     * 指派
     */
    handleAssign(row) {
      this.$refs.troubleShootingAssignDialog.open(row.id);
    },
     /**
     * 接收
     */
    handleReceive(row) {
       this.$refs.troubleShootingReceiveDialog.open(row.id)
    },
  }
}
</script>

<style lang="scss" scoped>
    .trouble-shooting-table-wraper{
        height: 382px;
        position: relative;
        .trouble-shooting-table-title{
          padding-left: 5px;
          padding-bottom: 10px;
          font-size: 14px;
          font-weight: 500;
          &::before{
            content: "";
            border: 3px solid #1890ff;
            left: -5px;
            position: relative;
          }
        }
        .trouble-shooting-pagination{
            bottom: 5px;
            right: 0;
            position: absolute;
        }
        ::v-deep.el-table__empty-text {
            line-height: 295px;
        }
    }
</style>